<script setup>
import { ref } from "vue";
let loginUser = ref(sessionStorage.getItem("token"));
let userinfo  = ref(sessionStorage.getItem("user"));

// 退出登录
const doLogout = () => {
  localStorage.clear();
};
</script>

<template>
  <div>
    <!-- 快捷链接  -->
    <div class="topBar">
      <template v-if="loginUser === null">
        <div class="loginArea">
          <b>欢迎光临知遇书坊&nbsp;请</b><a href="/login" class="login">登录</a>
          <span>|</span>
          <a href="/register" class="regist">注册</a>
        </div>
      </template>
      <template v-else>
        <li style="display: inline">
          <a href="/"
            >欢迎光临知遇书坊&nbsp;<span
              style="color: #0365b9"
              class="username"
              >{{ JSON.parse(userinfo).username }}</span
            ></a
          >
        </li>
        <li style="display: inline; margin-left: 30px">
          <a href="/login" @click="doLogout" class="logout">[安全退出]</a>
        </li>
      </template>
      <!--登入 注册-->

      <!--右侧工具栏-->
      <div class="webTool">
        <ul>
          <li><a href="/shopcart">购物车</a></li>
          <li><a href="/order">我的订单</a></li>
          <!-- <li><a href="/own">我的账户</a></li> -->
          <li><a href="#">手机版官方</a></li>
        </ul>
      </div>
    </div>
        <div class="banner-box">
      <img src="\src\assets\logo3.png" alt="" />
    </div>
    <hr />
  </div>
</template>

<style scoped>
/* 快捷导航 */
.topBar {
  background: #f2f2f2;
  position: relative;
  z-index: 10;
  /* width: 1200px; */
  margin: auto;
  padding-left: 140px;
  height: 35px;
}
.loginArea {
  float: left;
  overflow: hidden;
  line-height: 30px;
  line-height: 30px;
}

.loginArea b {
  color: #666;
  float: left;
}

a {
  text-decoration: none;
  color: #333;
  outline: none;
}

.loginArea a {
  float: left;
  color: #e60000;
}
.loginArea a.login {
  margin-left: 7px;
}
.loginArea span {
  color: #d1d1d1;
  margin: 0 9px;
  float: left;
}

.topBar .webTool {
  float: right;
}

li,
ol,
ul {
  list-style: none;
}

.webTool a {
  line-height: 28px;
  display: block;
  height: 29px;
  padding: 0 16px;
  border: 1px solid #f2f2f2;
  border-bottom: none;
  position: relative;
  z-index: 10;
}
.webTool ul li {
  float: left;
  position: relative;
}
.webTool ul li a:hover{
  text-decoration: underline;
  color: #e60000;
}

.dropLayer {
  box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 29px;
  left: 0px;
  border: 1px solid #dadada;
  background: #fff;
  z-index: 9;
  display: none;
  padding-left: 12px;
}
.dropLayer a {
  float: left;
  color: #666;
  line-height: 24px;
  margin-bottom: 6px;
  width: 76px;
}
.banner-box{
  width: 1000px;
  margin: 0 auto;
}
.banner-box img {
  width: 150px;
}
hr {
  border: none; /* 去掉默认边框 */
  height: 2px; /* 设置高度 */
  background-color: rgb(255, 0, 0); /* 设置背景颜色，即分隔线颜色 */
}
</style>
